<template>
    <div>

        <div class="role-list">
            <div class="role-list-title">
                角色列表
            </div>
            <div class="role-list-body">
              <el-table
              style="width: 100%"
              :data="roleData"
              v-loading="roleLoading"
              :border="true"
              @row-click="roleSelectChange"
              >
                  <el-table-column
                      prop="name"
                      label="角色名称"

                  >
                  </el-table-column>
                  <el-table-column
                      prop="description"
                      label="描述"
                      width="500"
                  >
                  </el-table-column>
                  <el-table-column
                      prop="enabled"
                      label="是否启用"
                      width="150"
                      :formatter="formatterInp"
                  >
                  </el-table-column>
                  <el-table-column
                      prop="createTime"
                      label="创建时间"

                      :formatter="formatterTime"
                  >
                  </el-table-column>
              </el-table>
            </div> 
            
        </div>

        <div class="power-list">
            <div class="power-list-title">
                <el-button icon="el-icon-setting" size="mini" @click="savePower">保存</el-button>
            </div>
            <div class="power-list-body"> 
              <el-tree
              show-checkbox
              default-expand-all
              :data="powerData"
              node-key="id"
              ref="powerTree"
              :props="defaultProps"
              v-loading.fullscreen.lock="loadTree"
              >
              </el-tree>
            </div>
            

        </div>
    </div>
</template>

<script>
import $ from "jquery";
export default {
  data() {
    return {
      roleData: [],
      roleLoading: false,
      roleSelectData: "",
      powerData: [],
      defaultProps: {
        label: "name"
      },
      loadTree: false
    };
  },
  mounted() {
    let _this = this;
    this.initRoleList();
    this.initPowerList();
  },
  methods: {
    initRoleList() {
      let _this = this;
      $.ajax({
        url: "/api/systemConfig/role/list?respType=1",
        dataType: "json",
        type: "get",
        success: function(data) {
          _this.roleData = data;
        }
      });
    },
    initPowerList() {
      let _this = this;
      $.ajax({
        url: "/api/systemConfig/operation/list?respType=1",
        dataType: "json",
        type: "get",
        success: function(data) {
          //   _this.powerData = _this.handleData(data);
          _this.powerData = data;
        }
      });
    },
    // 处理权限树数据
    // handleData(node) {
    //   let _this = this;
    //   for (let item in node) {
    //     node[item].label = node[item].name;
    //     if (node[item].children) {
    //       _this.handleData(node[item].children);
    //     } else {
    //       return false;
    //     }
    //   }
    //   return node;
    // },
    // 获取权限
    roleSelectChange(row) {
      let _this = this;
      this.loadTree = true;
      this.roleSelectData = row;
      //  清空所有选中节点
      _this.$refs.powerTree.setCheckedKeys([]);
      $.ajax({
        url: "/api/systemConfig/role/" + row.id + "/operation/list",
        dataType: "json",
        async: true,
        type: "GET",
        success: function(data) {
          let keyArr = [];
          for (let i = 0; i < data.data.length; i++) {
            keyArr.push(data.data[i].operation.id);
          }
          _this.$refs.powerTree.setCheckedKeys(keyArr);
          _this.loadTree = false;
        }
      });
    },
    // 保存权限
    savePower() {
      let _this = this;
      let row = this.roleSelectData;
      let selecteds = _this.$refs.powerTree.getCheckedKeys();
      let ids = "";
      for (var i = 0; i < selecteds.length; i++) {
        ids += selecteds[i] + ",";
      }
      ids = ids.substring(0, ids.length - 1);
      console.log(ids);
      _this.loadTree = true;
      $.ajax({
        url: "/api/systemConfig/role/" + row.id + "/operation",
        dataType: "json",
        async: true,
        type: "POST",
        data: {
          operationIds: ids,
          enabled: 1
        },
        success: function(data) {
          _this.$message({
            message: "保存成功",
            type: "success"
          });
          _this.loadTree = false;
        }
      });
    },
    formatterInp(row, column, cellValue) {
      var inpt = "";
      if (cellValue == 1) {
        inpt = <input type="checkbox" checked="checked" />;
      } else {
        inpt = <input type="checkbox" />;
      }
      return inpt;
    },
    formatterTime(row, column, cellValue) {
      let date = new Date(cellValue); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let Y = date.getFullYear() + "-";
      let M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      let D = date.getDate() + " ";
      let h = date.getHours() + ":";
      let m = date.getMinutes() + ":";
      let s = date.getSeconds();
      return Y + M + D + h + m + s;
    }
  }
};
</script>

<style scoped>
.role-list-title {
  width: 100%;
  padding-top: 10px;
  line-height: 50px;
  background: #fff;
  padding-left: 20px;
  color: #666;
}
.role-list-body{
  padding: 10px;
  background-color: #fff;
  width: 100%;
}
.power-list-title {
  line-height: 50px;
  background-color: #fff;
  padding-left: 20px;
  width: 100%;
}
.power-list-body{
  width: 100%;
  padding: 10px;
  background-color: #fff;
}
</style>
